<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/nouislider.css" />
	<link rel="stylesheet" type="text/css" href="../css/search.css"/>
</head>
<body class="gray">
	<div class="mui-content">
		<div class="mui-scroll-wrapper">
		    <div class="mui-scroll">
			    <div class="mui-content-padded search-item city link" _id="city" _title="选择城市" _href="city.html">
					<div class="mui-pull-right"> 深圳 </div>
					<div class="mui-pull-left">所在城市</div>
				</div>
				<div style="margin-top: 10px;" class="mui-content-padded search-item city link" _id="city" _title="选择城市" _href="city.html">
					<div class="mui-pull-right"> 福田 </div>
					<div class="mui-pull-left">所在区域</div>
				</div>
				<div class="search-h1">租赁类型</div>
					<div class="mui-content-padded search-type">
						<div class="mui-pull-left " v-bind:class="{active:type==2}" data-type="2" >套餐</div>
						<div class="mui-pull-left " v-bind:class="{active:type==1}" data-type="1">单品</div>
					</div>
				<div class="search-h1">租赁时间</div>
					<div class="mui-content-padded search-item date">
						<div class="mui-pull-right">
							<span>结束</span>
							<p>3月5日</p>
						</div>
						<div class="mui-pull-left">
							<span>开始</span>
							<p>3月5日</p>
						</div>
					</div>
				<div class="mui-content-padded search-item city link" _id="age" _title="选择年龄段" _href="age.html" >
					<div class="mui-pull-right"> 广告 </div>
					<div class="mui-pull-left">影片类型</div>
				</div>
				<div class="mui-content-padded search-item city link" _id="stature" _title="选择身高" _href="stature.html" >
					<div class="mui-pull-right"> 剪辑 </div>
					<div class="mui-pull-left">工作类型</div> 
				</div>
				<div class="search-h1">价格区间</div>
					<div class="mui-content-padded nouder" style="margin-bottom: 4px;">
						<div class="mui-clearfix">
							<span class="mui-pull-left">10</span>
							<span class="mui-pull-right ">2.5K</span>
						</div>
						<div id="noUiSlider" class="noUiSlider"></div>
					</div>
		    </div>
		</div>
		<div class="search-bug" >
			<button type="button" class="bexta-btn bexta-btn-drak mui-btn mui-btn-block bexta-btn-no_radius search-btn mui-action-back">开始搜索</button>
		</div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/nouislider.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps , views;
	mui.plusReady(function () {
	   views = bexta.getWebview();
	   bexta.ajax(api.search, function(res){
//	     	initVue(res);
	     }, {data:{class_id:views.type}});
	});
	mui.init();
	 mui.ready(function () {
	 	setTimeout(function(){
	 		mui('.mui-scroll-wrapper')[0].style.height = window.innerHeight - 50 + 'px';
	   		mui('.mui-scroll-wrapper').scroll();
	 	},200)
	 	
	   	var noUiSlider_obj = document.getElementById('noUiSlider');
			noUiSlider.create(noUiSlider_obj, {
				start: [10, 2500],
				connect: true,
				setp: 10,
				range: {
					min: [10],
					max: [5000]
				}
			});
			noUiSlider_obj.noUiSlider.on('update', function(val, index) {
				var span = D('.nouder .mui-clearfix span');
				for(var i = 0; i < val.length; i++) {
					if(val[i] > 999) {
						val[i] = (parseFloat(val[i]) / 1000).toFixed(2) + 'K';
					} else {
						val[i] = parseInt(val[i]);
					}
				}
				span.dom[index].innerText = val[index];
			});
	   })
</script>
</body>
</html>